<!--  -->
<template>
  <div class="grammar-check"  @click="bodyClick('body')">
    <div class="chose-course-top">
      <div class="header-left">
        <span
          class="back-arrow"
          @click="() => this.$router.push('/reverse/grammar-sentence')"
        ></span>
      </div>
      <div class="course-title">
        考点练习
      </div>
      <div class="btn-group">
        <div class="spend-time">
          <img src="~assets/reverse/time.png" alt="" />
          <span>{{ spent_time | HHmmssFilter }}</span>
        </div>
        <a-button
          class="check-submit"
          type="primary"
          shape="round"
          @click="goAnswer"
          >提交答案</a-button
        >
      </div>
    </div>
    <div class="list-wrap scrolToMinView">
      <testItem
        v-for="(item, i) in testList.list"
        :renderData="item"
        :key="item.id"
        :visibleKey="visibleKey"
        @checkWordVisible="checkWordVisible"
        :index="i"
      ></testItem>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
import { grammarTest, grammarTestSub } from "@/services/reverse";
import testItem from "./testItem";
import { SUCCESS_CODE } from "@/utils/const";
import { mapState } from "vuex";
import Timetips from "@/components/Timetips";
import $ from "jquery";
// fetchEndTime, validCode, proofreadSub
export default {
  name: "proofread",
  components: {
    testItem,Timetips
  },
  data() {
    return {
      visibleKey: -1,
      checkKey: "1",
      testList: {},
      spent_time: 0,
      timer: "",
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
      sentenceList: (state) => state.sentenceList,
    }),
  },
  watch: {},
  methods: {
    checkWordVisible(i) {
     this.visibleKey = i
    },
    fetchProofread() {
      grammarTest({
        chapter_id: this.reverseStatus.chapters_id,
        curr_id: this.reverseStatus.curr_id,
        sentence_id: this.sentenceList.list.map((v) => v.id).toString(),
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.testList = res.data;
        }
      });
    },
    grammarTestSub(resultArr) {
      grammarTestSub({
        chapter_id: this.reverseStatus.chapters_id,
        curr_id: this.reverseStatus.curr_id,
        sentence_id: this.sentenceList.list.map((v) => v.id).toString(),
        stu_answer: JSON.stringify(resultArr),
        spent_time: this.spent_time,
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$router.push("/reverse/answer-notes");
        }
      });
    },
    goAnswer() {
      // 取值
      let arr = [];
      let testList = $(".list-wrap .test-item-wrap");
      testList.each(function(i, v) {
        let inputs = $(v).find("input");
        let itemArr = [];
        inputs.each(function(k, v) {
          console.log($(v).val());
          itemArr.push($(v).val());
        });
        arr[i] = itemArr;
      });
      //  格式化数据
      let resultObj = [];
      for (let i = 0; i < this.testList.list.length; i++) {
        if (arr[i].length > 0) {
          resultObj.push({
            id: this.testList.list[i].id,
            title: arr[i].toString(),
          });
        }
      }
      this.grammarTestSub(resultObj);
    },
    bodyClick(e) {
      if (e === 'body') {
        this.visibleKey = -1
      }
      if (!window[`bs:event:scroll:close`]) {
        this.visibleKey = -1
      }
    },  
  },
  created() {
    this.fetchProofread();
    document.addEventListener('scroll', this.bodyClick, true)
  },
  mounted() {
    this.timer = setInterval(() => {
      this.spent_time++;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    document.removeEventListener('scroll', this.bodyClick, true)
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import url("./index.less");
</style>
